<%@ page pageEncoding="UTF-8"%>
<%@ include file="../commons/head.jsp"%>
<title>JS的取值赋值</title>
</head>
	<body>
	<div style="height:150%;">
		<a id="firstA" href="http://www.baidu.com">百度</a>
		<!-- #指向当前页面，不会发生跳转 -->
		<a href="#">搜狐</a>
		<p style="color:red;"><strong>普通的文本节点1</strong></p>
		<p style="color:blue;">普通的文本节点2</p>
		<form id="myForm" name="MyForm">
			username:<input name="username" class="basic" type="text" value="HA"><br />
			password:<input name="psw" class="basic" type="text" value="123456"><br />
			gender:male<input type="radio" name="gender" value="1">
			female<input type="radio" name="gender" value="2"><br />
		</form>
		<p style="color:orange;">以上页面进行取值：</p>
		<script type="text/javascript">
			//在DOM中所有document中的文字及标签都被看成是一个个的对象
			//我们可以通过document中的一些方法来获取对应的这些节点Node
			//getElementsByTagName()方法根据标签名返回一个HTML的节点对象集合
			var pList=document.getElementsByTagName("p");
			document.write("p标签的第一个节点内容（包含标签信息->加粗）是："+pList[0].innerHTML+"<br />");
			document.write("p标签的第一个节点纯文本内容是："+pList[0].innerText+"<br />");
			document.write("p标签的第一个节点完全保留的内容是："+pList[0].outerHTML+"<br />");
			document.write("p标签的第二个节点内容是："+pList.item(1).innerHTML+"<br />");
			
			//作为参数值的字符串是大小写敏感的，必须保证与文档节点中的值高度匹配
			//如果文档包括两个id一样的节点，取第一个
			var a=document.getElementById("firstA");
			document.write("a标签的href属性值为："+a.href+"<br />");
			document.write("a标签的文本内容为："+a.innerText+"<br />");
			
			//上面两个获取元素的方法是不论文档类型都可以使用的
			//针对HTML文档，可以使用getElementsByName()这个方法
			var gender=document.getElementsByName("gender");
			document.write("name属性为gender的第二个节点的value值为："+gender[1].value+"<br />");
			
			//最新标准引入的方法：getElementsByClassName()
			var inputs=document.getElementsByClassName("basic");
			document.write("class属性为basic的第一个节点的value值为："+inputs[0].value+"<br />");
			
			//根据类似于CSS选择的语法对元素进行选择的方式（IQuery也使用该语法）
			//表示选择a标签的第一个元素
			var firstA=document.querySelector("a");
			document.write("第一个a标签的href值为："+firstA.href+"<br />");
			//如果需要用该种选择器选择全部
			var aNodes=document.querySelectorAll("a");
			document.write("第二个a标签的href值为："+aNodes[1].href+"<br />");
			
			//特殊的快捷访问方式
			var value1=document.forms[0].username.value;
			var value2=document.forms["myForm"].username.value;
			var value3=document.forms.item(0).username.value;
			var value4=document.forms.namedItem("myForm").username.value;
			var value5=document.MyForm.username.value;
			var value6=document.MyForm[0].value;
			document.write("value1~6的值是"+value1+","+value2+","+value3+","+value4+","+value5+","+value6);
			//document.links表示返回所有具有href属性的a标签组成的HTMLCollection
			document.write(inputs[0].getAttribute("name"));
		</script>
		<p style="color:orange;">进行赋值:</p>
		<p>赋值p标签的第一个节点纯文本内容为“123456”，此时加粗的效果会消失：</p><button onclick="changeText1()">执行</button>
		<p>赋值p标签的第一个节点内容为“abcdef”，此时加粗的效果会消失：</p><button onclick="changeText2()">执行</button>
		<p>赋值p标签的第一个节点完全保留的内容为“这个p节点消失了”，此时，页面只剩下第二个p标签，第一个p标签及其所有内容被代替成123456：</p><button onclick="changeText3()">执行</button>
		<p>赋值第一个a标签的href为指向本页面：</p><button onclick="changeText4()">执行</button>
		<p>赋值第一个input的值为"LiLei"，value是改变标签的value属性的值：</p><button onclick="changeText5()">执行</button>
		<script type="text/javascript">
			var pList=document.getElementsByTagName("p");
			
			function changeText1(){
				pList[0].innerText="123456";
			}
			function changeText2(){
				pList[0].innerHTML="abcdef";
			}
			function changeText3(){
				pList[0].outerHTML="这个p节点消失了";
			}
			function changeText4(){
				var a=document.getElementById("firstA");
				a.href = "#";//href值为#时指向本地地址，得到的是本地地址，不会是#
			}
			function changeText5(){
				var inputs=document.getElementsByClassName("basic");
				inputs[0].value="LiLei";
			}
		</script>
	</div>
	</body>
</body>
</html>